<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          @change="getData()"
          clearable
          placeholder="地址查询"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="客户名称"
          @keyup.enter.native="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="负责人"
          @keyup.enter.native="getData()"
          clearable
          v-model="params.corp_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          number-key
          placeholder="客户状态"
          v-model="customerStatus"
          :options="enumCustomerStatus"
          @change="handleCustomerStatusChange"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <customer-status-dialog
      :visible.sync="editVisible"
      :customer-data="customerData"
      @success="handleStatusSuccess"
    ></customer-status-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { projectShowJobs } from '@/credit/plugins/constant'
import {
  dataAdapter,
  enumCustomerStatus,
  getParamsFromStatus,
} from '@/credit/views/city/customer/blackList/mixins'

import SelectAddress from '@/components/select/SelectAddress'
import CustomerStatusDialog from '@/credit/views/city/customer/blackList/CustomerStatusDialog'

export default {
  components: {
    SelectAddress,
    CustomerStatusDialog,
  },
  props: {
    customerType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      enumCustomerStatus,
      statusParams: {},

      order: {
        create_time: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'submit_type.eq': 2,
      },
      loading: false,
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', minWidth: '110px' } },
        { attrs: { label: '组织类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '地址', prop: 'address', minWidth: '110px' } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', minWidth: '100px' } },
        { attrs: { label: '客户状态', prop: 'customerStatusLabel', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [{ content: '编辑', icon: 'fa fa-edit', event: this.handleEdit }],
        },
      ],
      tableName: 'datum_customer_info_warehouse',
      tableData: [],
      tableCount: 0,

      // 状态选择
      customerStatus: '',

      // 客户状态
      editVisible: false,
      customerData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'job', 'userId']),
    isShowAllJob() {
      return projectShowJobs.includes(this.job)
    },
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.params['customer_type.eq'] = this.customerType

    if (!this.isShowAllJob) {
      this.params.res_a_b = this.userId
    }

    this.getData()
  },
  mounted() {},
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            ...this.params,
            ...this.statusParams,
          },
          this.order
        )
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleCustomerStatusChange() {
      this.statusParams = getParamsFromStatus(this.customerStatus)
      this.getData()
    },

    handleEdit(row) {
      this.customerData = row ? { ...row } : {}
      this.editVisible = true
    },

    handleStatusSuccess({ data }) {
      Object.keys(data).forEach(key => {
        this.customerData[key] = data[key]
      })
      this.customerData = dataAdapter(this.customerData)
      this.getData(this.params.index)
    },
  },
}
</script>

<style lang="scss" scoped></style>
